<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Turing Cup</title>
		<style type="text/css">
			#content{
				width: 1000px;
				height: 650px;
				position: relative;
				margin: 0 auto;
			}
			#gamedis
			{
				position: absolute;
				top:  0px;
				left: 100px;
			}
			.player-div{
				font-family: "微软雅黑";
				font-weight: bold;
				position:absolute;
				max-width: 100px;
				word-break: break-all;
			}
			#player1{
				top: 0;
				left: 0;
				font-size: 24px;
			}
			#player2{
				top: 0;
				right: 0;
				font-size: 24px;
			}
			#player3{
				bottom:0;
				left: 0;
				font-size: 24px;
			}
			#player4{
				bottom: 0;
				right: 0;
				font-size: 24px;
			}
			#start{
				position: absolute;
				top:320px;
				right: 0;
				font-size: 24px;
			}
			#tick_count{
				position: absolute;
				top:320px;
				left: 0;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
	<div id="content">
		<div class="player-div" id="player1">
			<p id="player_name1">Player1<p/>
			<p id="player_score1"></p>
		</div>
		<div class="player-div" id="player2">
			<p id="player_name2">Player2<p/>
			<p id="player_score2"></p>
		</div>
		<div class="player-div" id="player3">
			<p id="player_name3">Player3<p/>
			<p id="player_score3"></p>
		</div>
		<div class="player-div" id="player4">
			<p id="player_name4">Player4<p/>
			<p id="player_score4"></p>
		</div>
		<div class="player-div" id="tick_count"></div>
		<canvas id="gamedis" height="650px" width="800px"></canvas>
		<button id='start' onclick="start_game();" disabled="disabled">Start!</button>
	</div>


	<div id="incomming"></div>
	<script>
		var inc = document.getElementById('incomming');
		var wsImpl = window.WebSocket || window.MozWebSocket;
		var gamedis = document.getElementById('gamedis');
		window.ws = new wsImpl('ws://localhost:8181/');
		ws.onmessage = function (evt) {
				// inc.innerHTML += evt.data + '<br/>';
				//console.log(evt,evt.data);
			};
		ws.onopen = function () {
				document.getElementById("start").disabled="";
				console.log('.. connection open<br/>');
			};
		ws.onclose = function () {
				document.getElementById("start").disabled="disabled";
				console.log('.. connection closed<br/>');
			}
		function start_game()
		{
			ws.send("Start");
		}
	</script>
	<script type="text/javascript" src="game.js"></script>
	</body>

</html>
